<template>
	<!-- 列表标签 -->
	<view style="padding: 20rpx;">
		<!-- head&&follow-->
		<view class="head-follow">
			<view class="head-left">
				<image :src="item.userpic" lazy-load mode="widthFix" @click="openSpace()"></image>
				<view>
					<view class="nickName"> {{item.username}}</view>
					<text class="text-time">{{item.newstime}}</text>
				</view>
			</view>
			<view class="animated follow" hover-class="pulse" @click="handleFollow()">
				{{item.isFollow?'已关注':"关注"}}
			</view>
		</view>
		<!-- title -->
		<view class="title">
			{{item.title}}
		</view>
		<!-- image -->
		<view v-if="item.titlepic">
			<image class="title-pic" :src="item.titlepic" lazy-load @click="openDetail()"></image>
		</view>
		<!-- imageBtn -->
		<view class="tool">
			<view class="animated"  hover-class="pulse text-main" @click="onSupport('support')" :class="item.support.type==='support'?'text-main':''">
				<!-- 顶 -->
				<text class="iconfont icon-dianzan2"></text>
				<text style="margin-left: 20rpx;">{{item.support.support_count>0?item.support.support_count:"支持"}}</text>
			</view>
			<view class="animated" hover-class="pulse text-main" @click="onSupport('unsupport')" :class="item.support.type==='unsupport'?'text-main':''">
				<!-- 踩 -->
				<text class="iconfont icon-cai"></text>
				<text style="margin-left: 20rpx;">{{item.support.unsupport_count>0?item.support.unsupport_count:'反对'}}</text>
			</view>
			<view class="animated" hover-class="pulse text-main" @click="openDetail()">
				<text class="iconfont icon-pinglun"></text>
				<text style="margin-left: 20rpx;">{{item.comment_count>0?item.comment_count:"评论"}}</text>
			</view>
			<view class="animated" hover-class="pulse text-main" @click="openDetail()">
				<text class="iconfont icon-fenxiang"></text>
				<text style="margin-left: 20rpx;">{{item.share_num>0?item.share_num:"分享"}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "commen-list",
		data() {
			return {}
		},
		props: {
			item: Object,
			index: Number
		},
		methods: {
			// 个人空间
			openSpace() {

			},
			// 关注
			handleFollow() {
				console.log("我被点击了")
				this.$emit("follow",this.index)
			},
			// 详情
			openDetail() {

			},
			//点赞/踩赞
			onSupport(val) {
				this.$emit("onSupport",val,this.index)
			}

		}
	}
</script>

<style scoped>
	.head-follow {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head-left {
		display: flex;
		align-items: center;

	}

	.head-left image {
		height: 65rpx;
		width: 65rpx;
		margin-right: 20rpx;
		border-radius: 100%;
	}

	/* 昵称 */
	.nickName {
		font-size: 30rpx;
		line-height: 1.5;
	}

	/* 时间 */
	.text-time {
		color: #9d9589;
		font-size: 20rpx;
		line-height: 1.5;
	}

	/* 关注 */
	.follow {
		width: 90rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: cneter;
		background-color: #ff5a7c;
		color: #FFFFFF;
		border-radius: 5rpx;
	}

	.title {
		font-size: 30rpx;
		margin: 20rpx;
	}

	.title-pic {
		height: 380rpx;
		width: 100%;
		border-radius: 5rpx;
	}

	.tool {
		display: flex;
		align-items: center;
	}

	.tool view {
		display: flex;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
	}
</style>
